<template>
	<!-- title部分-->
	<view class="title-topbox">
		<image class="title-topbox-img" src="../../static/返回2.png" @click="gotoIndex"></image>
		<view class="title-topbox-text" @click="gotoIndex">抖音</view>
		<view class="title_topbox-searchbox">
			<image class="title-topbox-searchbox-searchimg" src="../../static/搜索.png"></image>
			<input type="title-topbox-searchbox-searchtext" placeholder="搜索您喜欢的物品">
		</view>
	</view>


	<!-- 中间第三部分 -->

	<view class="centerthirdbox">
		<view class="centerthirdbox_tabbox">
			<view class="centerthirdbox_tabbox_text">猜你喜欢</view>
			<view class="centerthirdbox_tabbox_text">女装</view>
			<view class="centerthirdbox_tabbox_text">男装</view>
			<view class="centerthirdbox_tabbox_text">内衣</view>
			<view class="centerthirdbox_tabbox_text">美妆</view>
		</view>
	</view>

	<!-- 商品部分 -->
	<view class="shop">
		<view class="shopbox">
			<view class="shopbox_shopcontent">
				<view class="shopbox_shopcontent_img"></view>
				<view class="shopbox_shopcontent_text">【新年礼物】CHANEL香奈儿嘉栢丽尔香水...</view>

				<view class="shopbox_shopcontent_neirongbox">
					<view class="shopbox_shopcontent_neirongbox_leftbox">
						<view class="shopbox_shopcontent_neirongbox_leftbox_text">返佣8.12</view>
					</view>

					<view class="shopbox_shopcontent_neirongbox_rightbox">
						<view class="shopbox_shopcontent_neirongbox_rightbox_text1">368.00</view>
						<view class="shopbox_shopcontent_neirongbox_rightbox_text2">4̶6̶8̶.̶0̶0̶</view>
					</view>
				</view>
			</view>

			<view class="shopbox_shopcontent">
				<view class="shopbox_shopcontent_img"></view>
				<view class="shopbox_shopcontent_text">【新年礼物】CHANEL香奈儿嘉栢丽尔香水...</view>

				<view class="shopbox_shopcontent_neirongbox">
					<view class="shopbox_shopcontent_neirongbox_leftbox">
						<view class="shopbox_shopcontent_neirongbox_leftbox_text">返佣8.12</view>
					</view>

					<view class="shopbox_shopcontent_neirongbox_rightbox">
						<view class="shopbox_shopcontent_neirongbox_rightbox_text1">368.00</view>
						<view class="shopbox_shopcontent_neirongbox_rightbox_text2">4̶6̶8̶.̶0̶0̶</view>
					</view>
				</view>
			</view>


			<view class="shopbox_shopcontent">
				<view class="shopbox_shopcontent_img"></view>
				<view class="shopbox_shopcontent_text">【新年礼物】CHANEL香奈儿嘉栢丽尔香水...</view>

				<view class="shopbox_shopcontent_neirongbox">
					<view class="shopbox_shopcontent_neirongbox_leftbox">
						<view class="shopbox_shopcontent_neirongbox_leftbox_text">返佣8.12</view>
					</view>

					<view class="shopbox_shopcontent_neirongbox_rightbox">
						<view class="shopbox_shopcontent_neirongbox_rightbox_text1">368.00</view>
						<view class="shopbox_shopcontent_neirongbox_rightbox_text2">4̶6̶8̶.̶0̶0̶</view>
					</view>
				</view>
			</view>


			<view class="shopbox_shopcontent">
				<view class="shopbox_shopcontent_img"></view>
				<view class="shopbox_shopcontent_text">【新年礼物】CHANEL香奈儿嘉栢丽尔香水...</view>

				<view class="shopbox_shopcontent_neirongbox">
					<view class="shopbox_shopcontent_neirongbox_leftbox">
						<view class="shopbox_shopcontent_neirongbox_leftbox_text">返佣8.12</view>
					</view>

					<view class="shopbox_shopcontent_neirongbox_rightbox">
						<view class="shopbox_shopcontent_neirongbox_rightbox_text1">368.00</view>
						<view class="shopbox_shopcontent_neirongbox_rightbox_text2">4̶6̶8̶.̶0̶0̶</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			gotoIndex() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.switchTab({
					url: '/pages/index/index', // 我的路径
				});
			},
		}
	}
</script>

<style>
	page {
		background: rgb(246, 246, 246);
	}

	/* title */
	.title-topbox {
		display: flex;
		align-items: center;
		background:rgb(255, 60, 87);
		padding: 2%;
	}

	.title-topbox-img {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}

	.title-topbox-text {
		font-size: 13px;
		color: white;
		margin-right: 10px;
	}

	.title_topbox-searchbox {
		display: flex;
		align-items: center;
		padding: 2% 6%;
		background: white;
		border-radius: 25px;
		flex: 1;
	}

	.title-topbox-searchbox-searchimg {
		width: 20px;
		height: 20px;
		margin: 0 5px;
	}

	.title-topbox-searchbox-searchtext {}

	/* 中间第三部分 */
	.centerthirdbox {
		padding: 4% 2%;
		color: white;
		background:rgb(255, 60, 87);
	}

	.centerthirdbox_tabbox {
		display: flex;
		align-items: center;
	}

	.centerthirdbox_tabbox_text {
		font-size: 12px;
		/* color: rgb(120, 120, 120); */
		margin: 0 2%;
	}

	/* 商品部分 */
	.shop {
		padding: 2%;
		background: linear-gradient(to bottom, rgb(255, 60, 87) 0%, rgba(250, 90, 34, 0) 17%);
	}

	.shopbox {
		/* margin: 0 auto; */
		display: flex;
		flex-wrap: wrap;
		/* align-items: center; */
		gap: 2%;
	}

	.shopbox_shopcontent {
		width: 43%;
		background: white;
		padding: 3%;
		margin-bottom: 3%;
		border-radius: 10px;
	}

	.shopbox_shopcontent_img {
		width: 100%;
		height: 108px;
	}

	.shopbox_shopcontent_text {
		font-size: 15px;
		margin-bottom: 10px;
	}

	.shopbox_shopcontent_neirongbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shopbox_shopcontent_neirongbox_leftbox {
		padding: 2%;
		width: 40%;
	}

	.shopbox_shopcontent_neirongbox_leftbox_text {
		font-size: 11px;
		text-align: center;
		color: white;
		padding: 5% 10%;
		border-radius: 10px;
		background: linear-gradient(190deg, rgb(255, 60, 87), rgb(248, 195, 79));
	}

	.shopbox_shopcontent_neirongbox_rightbox_text1 {
		color: red;
		font-size: 12px;
		text-align: center;
	}

	.shopbox_shopcontent_neirongbox_rightbox_text2 {
		font-size: 10px;
		color: rgb(187, 187, 187);
		text-align: center;
	}
</style>
